<template>
	<view class="bg-w order-item">
		<uni-popup ref="popup" type="dialog">
			<!-- 			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
 -->
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="提醒" content="您确定取消订单吗？"
				@confirm="handledialogConfirm" @close="handledialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="flex flex-align-center flex-space-between order-sn font24">
			<text class="color-8E8E8E">订单编号 {{ dataItem.merchant_order_id }}</text>
			<text class="col" style="color: #F52200;">{{dataItem.payStatus}}</text>
		</view>
		<view class="m-t-30 goods-box flex">
			<image class="border-r10" style="width: 132rpx;height: 132rpx;margin-right: 16rpx;"
				:src="dataItem.shopphoto" mode=""></image>
			<view class="flex-1">
				<view class="flex flex-align-center flex-space-between">
					<text class="color-b3 font28 f-b">{{ dataItem.subject }}</text>
					<text style="color: #001226;">
						<text class="font20">¥</text>
						<text class="font32 f-b" style="margin-left: 8rpx;">{{ dataItem.amount }}</text>
					</text>
				</view>
				<view class="color-b5 flex flex-align-center flex-space-between font24 m-t-10">
					<text>{{ dataItem.body }}</text>
					<text v-if="dataItem.goodsNum">X{{ dataItem.goodsNum }}</text>
				</view>
				<view class="color-001226 flex flex-space-end flex-align-center m-t-30">
					<text class="font28">支付总额</text>
					<text class="font40 f-b" style="margin-left: 16rpx;">¥{{ dataItem.amount }}</text>
				</view>
				<view class="button-box flex flex-space-end m-t-30">
					<view class="flex flex-center font28 color-b6" @click="handleCancle">取消订单</view>
					<view class="flex flex-center font28 color-3FA897 f-b m-l-30"
						@click="handleClickSubmit(dataItem.id)">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const { proxy } = getCurrentInstance() as any

	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		}
	})

	function handleCancle() {
		proxy.$refs.popup.open()
	}

	function handledialogConfirm() {
		proxy.$refs.popup.close()
	}

	function handledialogClose() {
		proxy.$refs.popup.close()
	}

	function handleClickSubmit(e) {
		let url = proxy.$API.getPayParams
		let param = {
			id: e,
			channelCode: "wx_lite",
			channelExtras: {
			    returnUrl: "http://dashboard-vue3.yudao.iocoder.cn/pay/cashier?id=306&returnUrl=%252Fpay%252Fdemo-order%253Fid%253D179",
			    openid: "ovA7l5bi_KQyU9NZ_xUHHWgZUTOI",
			}
		}
		proxy.$UNIHTTP.postData(url, param).then((res: any) => {
			if(res.code == 0){
				const { appId, timeStamp, nonceStr, packageValue, signType, paySign } = res.data.invokeResponse;
				console.log(res.data.invokeResponse, "res.data.invokeResponse")
				uni.requestPayment({
			        timeStamp,
			        nonceStr,
			        package: packageValue,
			        signType,
			        paySign,
			        success: function (res) {
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
			        },
					fail: function (err) {
						uni.showToast({
							icon: 'fail',
							title: '支付失败'
						})
					}
		        });
			}
		})
	}
</script>

<style lang="scss" scoped>
	.color-001226 {
		color: #001226;
	}

	.order-item {
		border-radius: 32rpx;
		padding: 0 12rpx;
		margin-top: 20rpx;

		.order-sn {
			padding: 18rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.goods-box {
			padding: 0 18rpx;
		}
	}

	.button-box {
		margin-bottom: 30rpx;

		view {
			height: 64rpx;
			padding: 0 34rpx;
			border: 1rpx solid #E5E5E5;
			border-radius: 32rpx;
		}
	}
</style>
